import NoItemsMessage from "../../cart/NoItemsMessage.tsx";
import PageHeader from "../PageHeader.tsx";
import {useEffect, useState} from "react";
import axios from "axios";
import {baseUrl} from "../../../settings/Settings.ts";
import UserAccount from "../../../model/UserAccount.ts";
import BookHolder from "./BookHolder.tsx";


const LibraryFragment = () => {

    const [account, setAccount] = useState<UserAccount>()


    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get(`${baseUrl}/api/account/info`, {
                    withCredentials: true, // send credentials with the request
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });

                const data = response.data;
                if (response.status === 200) {
                    setAccount(data.account);

                }
                console.log(data)

            } catch (error) {
                console.error('Error fetching data');
            }
        };

        fetchData();
    }, []);


    return (
        <>

                <PageHeader title={"My Library"} counter={account?.listBooks.length as number} id={"profile-container-lib-header"}/>
                <div className="row mt-0 m-1 mb-2 row-cols-1 row-cols-sm-2 row-cols-md-4 g-3 card-row">

                    <div className="col w-100 mt-0">
                        <div className="container mt-0 p-0 mb-5" id="container-items-list">
                            <span
                                className="badge p-2 ps-4 pe-4 me-3 mt-2 ms-3 rounded-pill">Your limit is 6 books</span>

                            <BookHolder/>
                            <NoItemsMessage/>

                        </div>
                    </div>
                </div>



        </>

    )
}

export default LibraryFragment